<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 一个组件本质上是一个拥有预定义选项的一个 Vue 实例 -->

    <div id="app">
      <h1>hello world</h1>
      <xxx-yyy></xxx-yyy>
      <xxx-yyy></xxx-yyy>
      <xxx-yyy></xxx-yyy>
    </div>
    <script>
      //   组件的注册
      Vue.component("xxx-yyy", {
        template: `
        <div>
            <p>我是组件xxx</p>
            <span>组件其他元素</span>
        </div>
        `,
      });
      // vue组件与 vue根实例 唯一区别就是 没有 el 换成template

      new Vue({
        el: "#app",
      });
    </script>

    <hr />
    <div id="app2">
      <!-- <ul>
        <todo-item></todo-item>
        <todo-item></todo-item>
        <todo-item></todo-item>
      </ul> -->
      <ul>
        <!-- <todo-item xx="456"></todo-item>
        <todo-item xx="789"></todo-item>
        <todo-item xx="000"></todo-item> -->

        <todo-item class="xxx" v-for="todo in todos" v-bind:xx="todo"></todo-item>
      </ul>
    </div>
    <script>
      Vue.component("todo-item", {
        props: ["xx"],
        template: "<div><li>代办项目{{xx}}</li><span>xx</span></div>",
        // template: "<li>代办项目{{xx}}</li><span>xx</span>",
      });
      // 组件模板 有且只能有一个根元素

      new Vue({
        el: "#app2",
        data: {
          todos: ["1111", "2222", "3333"],
        },
      });
    </script>

    <hr />

    <div id="app3">
      <ol>
        <xx-item v-for="item in groceryList" v-bind:obj="item"></xx-item>
      </ol>
    </div>
    <script>
      Vue.component("xx-item", {
        props: ["obj"],
        template: "<li>{{obj.text}}</li>",
      });

      new Vue({
        el: "#app3",
        data: {
          groceryList: [
            { id: 0, text: "蔬菜" },
            { id: 1, text: "奶酪" },
            { id: 2, text: "随便其它什么人吃的东西" },
          ],
        },
      });
    </script>

    <!-- 组件传值 父组件传子组件 用props -->
  </body>
</html>
